:root {
    /* 라이트 테마 (기존 색상) */
    --window-bg: linear-gradient(to bottom, rgba(250, 250, 250, 0.4), rgba(240, 240, 240, 0.6));
    --window-border: rgba(200, 200, 200, 0.5);
    --title-bg: linear-gradient(to bottom, rgba(250, 250, 250, 0.7), rgba(240, 240, 240, 0.5));
    --title-text: #333;
    --title-info-text: #666;
    --button-red: #ff5f57;
    --button-yellow: #febc2e;
    --button-green: #28c840;
    --sidebar-bg: linear-gradient(to bottom, rgba(250, 250, 250, 0.7), rgba(240, 240, 240, 0.5));
    --accent-color-mac: #007aff;
    
    /* 추가 요소들 */
    --content-bg: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --item-hover: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.1);
	
	/* write.style.css 추가 변수 - 라이트 모드 */
    --drag-drop-bg: rgba(255, 255, 255, 0.1);
    --upload-area-bg: rgba(255, 255, 255, 0.3);
    --upload-tab-bg: rgba(255, 255, 255, 0.5);
    --url-input-bg: rgba(255, 255, 255, 0.7);
    --dropzone-border: #ccc;
    --dropzone-highlight-bg: rgba(0, 123, 255, 0.1);
    --preview-border: #eee;
    --preview-bg: #fafafa;
    --preview-info-text: #555;
    --button-red-hover: #d32f2f;
    --item-border: #ddd;
    --item-bg: #f9f9f9;
    --no-images-text: #888;
    --no-images-bg: #f9f9f9;
    --no-images-border: #ddd;
    --nav-button-bg: #e0e0e0;
    --nav-button-border: #ccc;
    --counter-text: #666;
    --shadow-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
    --window-bg: linear-gradient(to bottom, rgb(10 10 10 / 60%), rgb(2 7 21 / 40%));
    --window-border: rgba(70, 70, 70, 0.6);
    --title-bg: linear-gradient(to bottom, rgba(50, 50, 50, 0.7), rgba(2, 7, 21, 0.5));
    --title-text: #e0e0e0;
    --title-info-text: #b0b0b0;
    --button-red: #ff5f57;
    --button-yellow: #febc2e;
    --button-green: #28c840;
    --sidebar-bg: linear-gradient(to bottom, rgba(45, 45, 45, 0.7), rgba(2, 7, 21, 0.5));
    --accent-color-mac: rgb(57 19 26);
	
	/* 추가 요소들 */
    --content-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --border-color: #444444;
    --item-hover: rgba(255, 255, 255, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.3);
	
	/* write.style.css 추가 변수 - 다크 모드 */
    --drag-drop-bg: rgba(0, 0, 0, 0.2);
    --upload-area-bg: rgba(0, 0, 0, 0.2);
    --upload-tab-bg: rgba(255, 255, 255, 0.1);
    --url-input-bg: rgba(0, 0, 0, 0.3);
    --dropzone-border: #444;
    --dropzone-highlight-bg: rgba(0, 123, 255, 0.2);
    --preview-border: #444;
    --preview-bg: #333;
    --preview-info-text: #aaa;
    --button-red-hover: #b71c1c;
    --item-border: #444;
    --item-bg: #333;
    --no-images-text: #aaa;
    --no-images-bg: #333;
    --no-images-border: #444;
    --nav-button-bg: #444;
    --nav-button-border: #555;
    --counter-text: #aaa;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* default 테마: default.css.php 변수 참조 */
[data-theme="default"] {
    --window-bg: linear-gradient(to bottom, rgb(from var(--card-bg-color) r g b / 0.2), rgb(from var(--container-bg-color) r g b / 0.7));
    --window-border: rgb(from var(--container-border-color) r g b / 0.9);
    --title-bg: linear-gradient(to bottom, rgb(from var(--container-bg-color) r g b / 0.7), rgb(from var(--card-bg-color) r g b / 0.5));
    --title-text: var(--title-font-color);
    --title-info-text: var(--text-muted);
    --button-red: var(--accent-color);
    --button-yellow: var(--secondary-color);
    --button-green: var(--primary-color);
    --sidebar-bg: linear-gradient(105deg, rgb(from var(--container-bg-color) r g b / 0.7), rgb(from var(--card-bg-color) r g b / 0.5));
    --accent-color-mac: var(--accent-color);

    /* 추가 요소들 */
    --content-bg: var(--card-bg-color);
    --text-color: var(--content-font-color);
    --border-color: var(--container-border-color);
    --item-hover: rgb(from var(--primary-color) r g b / 0.2);
    --shadow-color: rgb(from var(--black) r g b / 0.2);

    /* write.style.css 추가 변수 */
    --drag-drop-bg: rgb(from var(--card-bg-color) r g b / 0.1);
    --upload-area-bg: rgb(from var(--card-bg-color) r g b / 0.3);
    --upload-tab-bg: rgb(from var(--card-bg-color) r g b / 0.5);
    --url-input-bg: rgb(from var(--form-bg-color) r g b / 0.7);
    --dropzone-border: var(--form-border-color);
    --dropzone-highlight-bg: rgb(from var(--primary-color) r g b / 0.1);
    --preview-border: var(--border-light);
    --preview-bg: var(--gray-50);
    --preview-info-text: var(--text-muted);
    --button-red-hover: var(--primary-color);
    --item-border: var(--border-light);
    --item-bg: var(--gray-50);
    --no-images-text: var(--text-muted);
    --no-images-bg: var(--gray-50);
    --no-images-border: var(--border-light);
    --nav-button-bg: var(--gray-200);
    --nav-button-border: var(--gray-300);
    --counter-text: var(--text-muted);
}